<template>
    <div class="divBox">
        <el-card class="box-card">
            <el-form label-width="110px">
                <el-row :gutter="24">
                    <el-col :span="7">
                        <el-form-item label="内容搜索：">
                            <el-input v-model="tableData.title" placeholder="请输入要搜索的内容">
                                <el-button slot="append" icon="el-icon-search"
                                    style="background-color: #409EFF;color: #FFFFFF;" @click="sousuo"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-button type="primary" style="background-color: #409EFF;color: #FFFFFF;"
                                @click="add">添加</el-button>
                        </el-form-item>
                    </el-col>

                    <!-- <el-button type="primary" style="margin:10px 0 0 10px;" @click="unData">在手机端展示</el-button> -->
                </el-row>
            </el-form>
            <el-table :data="multipleSelection" :row-key="getRowKey" ref="multipleTable"
                @selection-change="handleSelectionChange" style="width: 100%;" size="small" id="educe-table">
                <!-- <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column> -->
                <el-table-column prop="id" label="ID" min-width="40"></el-table-column>
                <el-table-column prop="title" label="名片签名内容" min-width="300"></el-table-column>
                <el-table-column prop="userInfo.nickname" label="用户" min-width="80"
                    :formatter="nickNameFor"></el-table-column>
                <el-table-column prop="userInfo.account" label="手机号" min-width="130"></el-table-column>
                <el-table-column prop="add_time" label="添加时间" width="140"></el-table-column>
                <el-table-column prop="is_show" label="是否在手机端展示" width="120">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.is_show" active-color="#13ce66" :active-value="1" :inactive-value="0"
                            inactive-color="#ff4949" @change="switchChange(scope.row.id)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editData(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="detailData(scope.row)">详情</el-button>
                        <el-button type="text" size="small" @click="deleteData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="tableData.pages" :page-sizes="[20, 30, 50]" :page-size="tableData.limes"
                layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </el-card>
        <!-- 详情 -->
        <div class="detail" v-if="showDetail">
            <el-card class="datail_card">
                <div slot="header" class="clearfix">
                    <span>详情</span>
                    <el-button style="float: right;" icon="el-icon-close" size="small" circle
                        @click="showDetail = false"></el-button>
                </div>
                <el-form :model="detailList" label-width="100px">
                    <el-form-item label="打招呼内容：">
                        {{ detailList.title }}
                    </el-form-item>
                    <el-form-item label="添加时间：">
                        {{ detailList.add_time }}
                    </el-form-item>
                    <el-form-item label="添加用户：">
                        {{ detailList.userInfo.nickname }}
                    </el-form-item>
                    <el-form-item label="用户手机号：">
                        {{ detailList.userInfo.account }}
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>
<script>
import {
    upCompanyInfo,
    getCompanyInfo,
    signatureList,
    addSignature,
    editSignature,
    modifySignature,
    deleteSignature,
    detailSignature
} from "@/api/buss"
export default {
    data() {
        return {
            showDetail: false,
            detailList: {},
            data: "",
            id: null,
            multipleSelection: [],
            tableData: {
                pages: 1,
                limes: 20,
                title: '',
                is_show: null
            },
            count: '',
        }
    },
    mounted() {
        // getCompanyInfo().then(res => {
        //     if (res.data.share_text) {
        //         var arr = res.data.share_text.split("|")
        //         for (var i = 0; i < arr.length; i++) {
        //             this.tableData.data.push({ text: arr[i] })
        //         }
        //     }
        //     if (res.data.share_check_text) {
        //         // this.multipleSelection = JSON.parse(res.data.share_check_text)
        //         this.$nextTick(() => {
        //             JSON.parse(res.data.share_check_text).map(vl => {
        //                 this.tableData.data.map(item => {
        //                     if (item.text == vl.text) {
        //                         item.type = 1
        //                         this.$refs.multipleTable.toggleRowSelection(item, true)
        //                     }
        //                 })
        //             })
        //         })
        //     }
        //     this.id = res.data.id
        // })
    },
    created() {
        this.getList()
    },
    methods: {
        nickNameFor(row) {
            console.log(row);
            return row.uid == 0 ? '管理员添加' : row.userInfo.nickname
        },
        // 状态修改
        switchChange(id) {
            modifySignature(id).then(res => {
                this.$message.success('修改完成')
                this.getList()
            }).catch(res => {
                this.$message.error(res.message)
            })
        },
        sousuo() {
            this.getList()
        },
        getList() {
            signatureList(this.tableData).then(res => {
                this.multipleSelection = res.data.list
                this.count = res.data.count
                this.tableData = {
                    pages: 1,
                    limes: 20,
                    title: '',
                    is_show: null
                }
            })
        },
        handleSizeChange() {
            this.getList()
        },
        handleCurrentChange() {
            this.getList()
        },
        formatter(row) {
            return row.is_show == 1 ? '是' : '否'
        },
        // 编辑
        editData(row) {
            console.log(row);
            this.$prompt('请输入修改内容', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                editSignature({
                    title: value
                }, row.id).then(res => {
                    this.$message.success('修改完成')
                    this.getList()
                })
            })
        },
        // 处理table key
        getRowKey(row) {
            return row.text
        },
        // 选中事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 添加
        add() {
            this.$prompt('请输入添加内容', '添加签名', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                addSignature({
                    title: value
                }).then(res => {
                    this.$message.success('添加完成')
                    this.getList()
                }).catch(res => {
                    this.$message.error(res.message)
                })
            })


        },
        // 提交数据
        unData() {
            var arr = [];
            if (this.tableData.data.length > 0) {
                for (var i = 0; i < this.tableData.data.length; i++) {
                    arr.push(this.tableData.data[i].text)
                }
            }
            upCompanyInfo({
                share_text: arr.join("|"),
                share_check_text: JSON.stringify(this.multipleSelection),
                id: this.id
            }).then(res => {
                this.$message.success(res.message)
            })
        },
        // 删除
        deleteData(row) {
            deleteSignature(row.id).then(res => {
                this.$message.success('删除成功')
                this.getList()
            }).catch(res => {
                this.$message.error(res.message)
            })
        },
        // 详情
        detailData(row) {
            detailSignature(row.id).then(res => {
                this.detailList = res.data
                console.log(res.data);
            }).then(res => {
                this.showDetail = true
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.detail {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: 0.2);

    .datail_card {
        height: 45vh;
        width: 40vw;
        position: fixed;
        top: 30vh;
        left: 30vw;

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
    }
}
</style>